<template>
  <div>
    <div class="header-wrap" :style="{ paddingTop }">
      <header class="header">
        <span class="header-title" v-html="cusTitle"></span>
      </header>
    </div>
    <div class="placeholder" :style="{ height: placeholderHeight }"></div>
  </div>
</template>

<script setup lang="ts">
import { getHeaderInfoVw } from '@/utils';
import getThemeHooks from '@/hooks/getThemeHooks';
interface Props {
  cusTitle: string;
}
defineProps<Props>();
const { getTheme, initTheme } = getThemeHooks();
getTheme();
initTheme();
const { statusBarHeight, headerHeight } = getHeaderInfoVw();
const paddingTop = `${statusBarHeight * 2}vw`;
const placeholderHeight = `${headerHeight + statusBarHeight}vw`;
</script>

<style scoped lang="less">
.header-wrap {
  position: fixed;
  background-color: var(--bg-color-2);
  width: 100%;
  // 防止hxmui暂无数据覆盖头部
  padding-top: 176px;
  z-index: 2000;
  top: 0;
  left: 0;
  .header {
    display: flex;
    position: relative;
    align-items: center;
    font-size: 38px;
    height: 88px;
    padding: 20px 24px;
    box-sizing: border-box;
    color: var(--text-6);
    &-title {
      line-height: 44px;
      font-weight: 500;
      font-size: 38px;
      text-align: center;
      white-space: nowrap;
      margin-left: 64px;
      margin-top: 4px;
    }
  }
}
</style>
